<template>
  <div class="container">
    <div class="wrapleft">
      <div class="sentenceContent">
        <p>{{sentenceDetail.content}}</p>
        <div class="handleItem MobileShow PadShowBtn">
          <div class="handBtn" @click="handThumbsUp()">
            <el-badge :value="sentenceDetail.like" class="item">
              <i class="iconfont" :class="{ navActive: sentenceThumbsUp.includes(sentenceDetail.id)}">&#xe60c;</i>
            </el-badge>
          </div>
          <div class="handBtn" @click="handCollect()">
            <el-badge :value="sentenceDetail.collect" class="item">
              <i class="iconfont" :class="{ navActive: collectList.includes(sentenceDetail.id)}">&#xe646;</i>
            </el-badge>
          </div>
      </div>
      </div>
      <comment-moudel
        :sentenceId='sentenceDetail.id'>
      </comment-moudel>
    </div>
    <div class="wrapright MobileHide">
      <div
        class="siderBox"
        :class="{acticeFlex: leaveHead}">
        <sider-moudel>
        </sider-moudel>
      </div>
    </div>
    <div class="handBtnGroup MobileHide PadHideBtn">
      <div class="handBtn" @click="handThumbsUp()">
        <el-badge :value="sentenceDetail.like" class="item">
          <i class="iconfont" :class="{ navActive: sentenceThumbsUp.includes(sentenceDetail.id)}">&#xe60c;</i>
        </el-badge>
      </div>
      <div class="handBtn" @click="handCollect()">
        <el-badge :value="sentenceDetail.collect" class="item">
          <i class="iconfont" :class="{ navActive: collectList.includes(sentenceDetail.id)}">&#xe646;</i>
        </el-badge>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex'
import siderMoudel from '~/components/layout/siderMoudel.vue'
import commentMoudel from '~/components/commentMoudel.vue'
import scrollEvent from '~/mixins/scrollEvent'
export default {
    name: 'sentence',
    layout: 'current',
    validate({ params, query }) {
        let id = params.id
        let re = /^[0-9]+.?[0-9]*$/;
        if (id && re.test(id)) {
            return true;
        }
        return false;
    },
    head() {
        return {
            title: `${this.sentenceDetail.content.length > 30 ? this.sentenceDetail.content.slice(0, 30) + '...' : this.sentenceDetail.content }-句摘文学`,
            meta: [
                { hid: 'keywords', name: 'keywords', content: '句摘文学，句子迷，句子控，优美句子，励志句子' },
                { hid: 'description', name: 'description', content: `${this.sentenceDetail.content}-句摘文学，文艺青年的家` }
            ]
        }
    },
    data() {
      return {
      };
    },
    mixins: [ scrollEvent ],
    async asyncData({ params, store }) {
        let id = params.id;
        await store.dispatch('sentence/getContent', { id });
        await store.dispatch('sentence/getCommont', { id, type: 1 });
    },
    components: {
        siderMoudel, commentMoudel
    },
    computed: {
        ...mapGetters('sentence', ['sentenceDetail', 'sentenceThumbsUp', 'collectList'])
    },
    methods: {
        ...mapMutations('sentence', {
          setSentenceDetail: 'SET_SENTENCE_CONTENT'
        }),
        ...mapMutations({
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        ...mapActions('sentence', ['thumbsUp', 'collect']),
        async handThumbsUp() {
            let sentenceId = this.sentenceDetail.id;
            let status = 1;
            if (this.sentenceThumbsUp.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.thumbsUp({
                typeId: sentenceId,
                type: 1,
                status: status
            });
            if (result.code == -10) {
              this.setSignVisible(true)
              return
            }
            if (result.code !== 0) {
              this.$notify({
                  message: result.msg,
                  type: 'warning',
                  offset: 50,
                  duration: 3000
              });
              return;
            }
            if (status) {
              this.setSentenceDetail({
                ...this.sentenceDetail,
                like: this.sentenceDetail.like + 1
              })
            } else {
              this.setSentenceDetail({
                ...this.sentenceDetail,
                like: this.sentenceDetail.like - 1
              })
            }
        },
        async handCollect() {
            let sentenceId = this.sentenceDetail.id;
            let status = 1;
            if (this.collectList.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.collect({
                sentenceId,
                status
            });
            if (result.code == -10) {
              this.setSignVisible(true)
              return
            }
            if (result.code !== 0) {
                this.$notify({
                    message: result.msg,
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
            if (status) {
              this.setSentenceDetail({
                ...this.sentenceDetail,
                collect: this.sentenceDetail.collect + 1
              })
            } else {
              this.setSentenceDetail({
                ...this.sentenceDetail,
                collect: this.sentenceDetail.collect - 1
              })
            }
        }
    },
    mounted() {
    }
}
</script>
